{% load custom_tags force_escape %}

<c-vars language="xml" rounded="rounded-xl" ignore_syntax_choice :hide_label="False" />

<div class="group shadow relative flex-1 flex flex-col justify-start w-full {{ rounded }} overflow-hidden mb-3"
     x-data="{% verbatim %}{
        get currentCode() {
            const htmlCode = $refs.htmlCode;
            const templateCode = $refs.templateCode;
            if ($store.syntaxPreference === 'html' && htmlCode) {
                return htmlCode.innerText;
            } else if (templateCode) {
                return templateCode.innerText;
            }
            return '';
        },
        copy() {
            const text = this.currentCode;
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text)
            } else {
                this.unsecuredCopyToClipboard(text)
            }
        },
        unsecuredCopyToClipboard(text) {
          const textArea = document.createElement('textarea');
          textArea.value = text;
          document.body.appendChild(textArea);
          textArea.select();
          try {
            document.execCommand('copy');
          } catch (err) {
            console.error('Unable to copy to clipboard', err);
          }
          document.body.removeChild(textArea);
        }
    }{% endverbatim %}"
    x-init="{% verbatim %}
        $watch('$store.syntaxPreference', () => {
            setTimeout(() => hljs.highlightAll(), 50);
        });
    {% endverbatim %}"
>
    {% if label and not hide_label %}<div class="absolute left-0 top-0 text-left w-full px-5 pt-3 text-sm text-gray-500 font-semibold">{{ label }}</div>{% endif %}

    <!-- Top-right controls: syntax switcher + copy button -->
    <div class="absolute right-0 top-0 pt-3 pr-5 flex items-center gap-3">
        {% if "<c-" in slot and not ignore_syntax_choice %}
            <div class="inline-flex rounded-lg gap-0.5">
                <!-- Buttons with individual backgrounds -->
                <button
                    @click="$store.syntaxPreference = 'html'"
                    class="px-2 py-1 text-[12px] transition-all duration-200 rounded-md min-w-[2rem]"
                    :class="$store.syntaxPreference === 'html'
                        ? 'bg-teal-600/20 text-teal-600 '
                        : 'text-gray-400 hover:text-gray-300'"
                >
                    HTML
                </button>
                <button
                    @click="$store.syntaxPreference = 'template'"
                    class="px-2 py-1 text-[12px] transition-all duration-200 rounded-md min-w-[2rem]"
                    :class="$store.syntaxPreference === 'template'
                        ? 'bg-teal-600/20 text-teal-600 '
                        : 'text-gray-400 hover:text-gray-300'"
                >
                    Native
                </button>
            </div>
        {% endif %}
        <!-- Copy button - always visible -->
        <button @click.prevent="copy" class="transition-opacity text-gray-500 duration-200 hover:text-gray-400">
            <c-icons.copy class="size-[1.1rem]" />
        </button>
    </div>

    {% if "<c-" in slot and not ignore_syntax_choice %}
        <!-- HTML Syntax Version -->
        <div x-show="$store.syntaxPreference === 'html'">
            <pre {{ attrs.dict|merge:'class: flex-1 flex flex-col !leading-7 !p-0 !m-0 rounded-none !text-[14.5px]' }}><code x-ref="htmlCode" class="language-{{ language }} flex-1 !pb-4 {% if not hide_label %}!pt-12{% else %}!pt-4{% endif %} !px-6 !m-0 !bg-gray-800 dark:!bg-gray-800">{{ slot|strip }}</code></pre>
        </div>

        <!-- Template Tag Syntax Version -->
        <div x-show="$store.syntaxPreference === 'template'">
            <pre {{ attrs.dict|merge:'class: flex-1 flex flex-col !leading-7 !p-0 !m-0 rounded-none !text-[14.5px]' }}><code x-ref="templateCode" class="language-{{ language }} flex-1 !pb-4 {% if not hide_label %}!pt-12{% else %}!pt-4{% endif %} !px-6 !m-0 !bg-gray-800 dark:!bg-gray-800">{{ slot|strip|to_template_tags }}</code></pre>
        </div>
    {% else %}
        <!-- No Cotton tags OR ignore-syntax-choice is set - show single static version -->
        <pre {{ attrs.dict|merge:'class: flex-1 flex flex-col !leading-7 !p-0 !m-0 rounded-none !text-[14.5px]' }}><code x-ref="htmlCode" class="language-{{ language }} flex-1 !pb-4 {% if not hide_label %}!pt-12{% else %}!pt-4{% endif %} !px-6 !m-0 !bg-gray-800 dark:!bg-gray-800">{{ slot|strip }}</code></pre>
    {% endif %}

    {% if preview %}
        <div class="px-6 py-6 prose-headings:text-gray-800 shadow bg-white dark:bg-gray-50 rounded-b-xl dark:!text-gray-800">
            <div class="text-sm text-gray-400 font-semibold uppercase tracking-wider pb-3">preview</div>
            {{ preview }}
        </div>
    {% endif %}
</div>
